import React, { useEffect } from 'react';
import {
  Form,
  Modal,
  Grid,
  Input,
  InputNumber,
  Select,
  TimePicker,
} from '@arco-design/web-react';
import * as Model from '@/services/model';
import Title from '@arco-design/web-react/es/Typography/title';
const { useForm } = Form;
const { Row, Col } = Grid;
interface DetailModalProps {
  supplierInfo?: Model.Supplier | false;
  onCancel: () => void;
  onOk: (params: Model.Supplier) => void;
}

export const DetailModal = (props: DetailModalProps) => {
  const [form] = useForm<Model.Supplier>();

  useEffect(() => {
    if (props.supplierInfo !== false) {
      form.setFieldsValue(props.supplierInfo);
    }
  }, [props.supplierInfo]);

  const submit = async () => {
    const res = await form.validate();
    if (res) {
      props.onOk(res);
    }
  };
  return (
    <Modal
      visible={props.supplierInfo !== false}
      title={`${
        props.supplierInfo && props.supplierInfo.id ? '修改' : '新增'
      }供应商`}
      mountOnEnter
      unmountOnExit
      onCancel={props.onCancel}
      onOk={submit}
      alignCenter={false}
      okText="提交"
      cancelText="取消"
      style={{ width: 800 }}
    >
      <Form<Model.Supplier>
        form={form}
        labelAlign="left"
        labelCol={{ span: 10 }}
        wrapperCol={{ span: 14 }}
      >
        <Title heading={6}>供应商基础信息</Title>
        <Row gutter={24}>
          <Col span={12}>
            <Form.Item label="供应商名称" field="name" required>
              <Input placeholder="请输入供应商名称" allowClear />
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item label="供应商名称缩写" field="shortname" required>
              <Input placeholder="请输入供应商名称缩写" allowClear />
            </Form.Item>
          </Col>
        </Row>

        <Title heading={6}>供应商装卸信息</Title>
        <Row gutter={24}>
          <Col span={12}>
            <Form.Item label="卸货道口" field="dock" required>
              <Select
                placeholder="请选择卸货道口"
                allowClear
                maxTagCount={2}
                mode="multiple"
              >
                <Select.Option value={'A1'}>A1</Select.Option>
                <Select.Option value={'A2'}>A2</Select.Option>
                <Select.Option value={'A3'}>A3</Select.Option>
                <Select.Option value={'B1'}>B1</Select.Option>
              </Select>
            </Form.Item>
          </Col>
        </Row>
        <Row gutter={24}>
          <Col span={12}>
            <Form.Item
              label="最小装货时间限制（分钟）"
              field="loadingTimeLimit"
              required
            >
              <InputNumber
                placeholder="请输入最小装货时间限制（分钟）"
                step={1}
              />
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item
              label="单立方装货时间（分钟）"
              field="cubicTimeUnit"
              required
            >
              <InputNumber
                placeholder="请输入最小装货时间限制（分钟）"
                step={1}
              />
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item label="供应商使用托盘型号" field="palletType" required>
              <Input placeholder="请输入供应商使用托盘型号" allowClear />
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item label="供应商使用托盘尺寸" field="palletSize" required>
              <Input placeholder="请输入供应商使用托盘尺寸" allowClear />
            </Form.Item>
          </Col>

          <Col span={12}>
            <Form.Item label="工作时间" field="workPeriod" required>
              <TimePicker.RangePicker placeholder={['开始时间', '结束时间']} />
            </Form.Item>
          </Col>
        </Row>

        <Title heading={6}>供应商地址信息</Title>
        <Row gutter={24}>
          <Col span={24}>
            <Form.Item
              labelCol={{ span: 4 }}
              wrapperCol={{ span: 20 }}
              label="供应商地址"
              field="dock"
              required
            >
              <Input placeholder="供应商地址" allowClear />
            </Form.Item>
          </Col>
        </Row>
      </Form>
    </Modal>
  );
};
